<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>tab标签选项卡切换jQuery特效 - PHP中文网</title>
<script src="./js/jquery-1.8.3.min.js"></script>
<!-- 第四步：开始写js -->
<script>
    $(function(){ 
        $(".zzsc .tab a").click(function(){
            //鼠标点击tab标签的时候，给自己添加选中class，并且移除同级的其他tab的选中class
            $(this).addClass('on').siblings().removeClass('on');
            //获取当前是第几个标签
            var index = $(this).index();
            number = index;
            //隐藏所有展示内容
            $('.zzsc .content li').hide();
            //打开和标签一样索引值的内容并且展示出来
            $('.zzsc .content li:eq('+index+')').show();
        });     
    });
</script>
<!-- 第三步：把样式写好 -->
<style>
*{ margin:0; padding:0; list-style:none;}
body{ font-size:12px; color:#666; text-align:left;}
h1{ text-align:center;}
.zzsc{ width:500px; height:200px; margin:300px auto; background:#f0f0f0; font-family:'微软雅黑';}
.zzsc .tab{ overflow:hidden; background:#ccc;}
.zzsc .tab a{ display:block; padding:10px 20px; float:left; text-decoration:none; color:#333;}
.zzsc .tab a:hover{ background:#E64E3F; color:#fff; text-decoration:none;}
.zzsc .tab a.on{ background:#E64E3F; color:#fff; text-decoration:none;}
.zzsc .content{ overflow:hidden; padding:10px;}
.zzsc .content li{ display:none;}
</style>
</head>
<body style="background-color: #000;">
<div class="zzsc">
    <!-- 第一步：写几个标签 -->
	<div class="tab">
    	<a href="javascript:;" class="on">js特效</a>
        <a href="javascript:;">flash素材</a>
        <a href="javascript:;">php中文网</a>
        <a href="javascript:;">在线客服代码</a>
    </div>
    <!-- 第二步：写每个标签要显示的内容 -->
    <div class="content">
    	<ul>
        	<li style="display:block;">js特效内容</li>
            <li>flash素材内容</li>
            <li>php中文网学习内容</li>
            <li>在线客服代码内容</li>
        </ul>
    </div>
</div>



</body>
</html>
